<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Key的作用</title>
</head>

<body>
<!-- 创建test -->
<div id="test"></div>
<!-- 引入核心库 -->
<script src="../newJs/react.development.js"></script>
<!-- 引入react操作DOM支持库 -->
<script src="../newJs/react-dom.development.js"></script>
<!-- 引入babel 用于将jsx转为js -->
<script src="../newJs/babel.min.js"></script>
<!-- 引入prop-types 用于对组件标签属性进行限制 -->
<script src="../newJs/prop-types.js"></script>
<script type="text/babel">  // 此处引入一定要写babel

/*
* 慢动作回放 --- 使用index索引值做key
*     初始数据
*      {id: 1,name: "张三",age: 18},
       {id: 2,name: "李四",age: 19},
       {id: 3,name: "王五",age: 20}
      初始的虚拟DOM
      *   <li key=0>张三 ---- 18 <input type="text"/> </li>
      *   <li key=1>李四 ---- 19 <input type="text"/> </li>
      *   <li key=2>王五 ---- 20 <input type="text"/> </li>
      *
      更新后的数据
        {id: 4,name: "小王",age: 22},
        {id: 1,name: "张三",age: 18},
        {id: 2,name: "李四",age: 19},
        {id: 3,name: "王五",age: 20}
     更新后的虚拟DOM为
      *   <li key=0>小王 ---- 22 <input type="text"/> </li>
      *   <li key=1>张三 ---- 18 <input type="text"/> </li>
      *   <li key=2>李四 ---- 19 <input type="text"/> </li>
      *   <li key=3>王五 ---- 20 <input type="text"/> </li>
      *
      *
 -------------------------------------------------------------------------------------
* 慢动作回放 --- 使用id(数据的唯一标识符)索引值做key
*     初始数据
*      {id: 1,name: "张三",age: 18},
       {id: 2,name: "李四",age: 19},
       {id: 3,name: "王五",age: 20}
      初始的虚拟DOM
      *   <li key=1>张三 ---- 18 <input type="text"/> </li>
      *   <li key=2>李四 ---- 19 <input type="text"/> </li>
      *   <li key=3>王五 ---- 20 <input type="text"/> </li>
      *
      更新后的数据
        {id: 4,name: "小王",age: 22},
        {id: 1,name: "张三",age: 18},
        {id: 2,name: "李四",age: 19},
        {id: 3,name: "王五",age: 20}
     更新后的虚拟DOM为
      *   <li key=4>小王 ---- 22 <input type="text"/> </li>
      *   <li key=1>张三 ---- 18 <input type="text"/> </li>
      *   <li key=2>李四 ---- 19 <input type="text"/> </li>
      *   <li key=3>王五 ---- 20 <input type="text"/> </li>
* */

/*
* 如果使用index下标作为key的话,如果进行了逆序添加,中间删除等类似操作,全部会导致没有必要的DOM更新
* 如果结构中还包含着输入类的DOM,会导致错误的DOM更新，页面显示直接出现问题
* */
class Person extends React.Component {

  state = {
    persons: [
      {
        id: 1,
        name: "张三",
        age: 18,
      },
      {
        id: 2,
        name: "李四",
        age: 19,
      },
      {
        id: 3,
        name: "王五",
        age: 20,
      }
    ]
  }

  render() {
    return (
      <div>
        <h2>展示人员信息</h2>
        <button onClick={this.add}>添加小王</button>
        <div>
          <h3>使用index索引值作为key</h3>
          <ul>
            {
              this.state.persons.map((item, index) => {
                return <li key={index}>{item.name} ---- {item.age}
                <label>
                  <input type="text"/>
                </label></li>
              })
            }
          </ul>
        </div>
        <hr/>
        <div>
          <h3>使用id(数据的唯一标识)索引值作为key</h3>
          <ul>
            {
              this.state.persons.map(item => {
                return <li key={item.id}>{item.name} ---- {item.age}
                <label>
                  <input type="text"/>
                </label></li>
              })
            }
          </ul>
        </div>
      </div>
    );
  }

  add = () => {
    const {persons} = this.state;
    const p = {
      id: persons.length + 1,
      name: "小王",
      age: 22
    }
    this.setState({persons: [p, ...persons]})
  }
}

ReactDOM.render(<Person/>, document.getElementById("test"))
</script>
</body>

</html>